@charset: 'utf-8';
body, div {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
body {
	background-color: #111;
}
#container {
	width: 1000px;
	margin: 100px auto;
}
.wrap {
	float: left;
 	margin: 0 120px 80px 0;
	perspective: 1000px;
}
.box,
.box>div {
	width: 200px;
	height: 200px;
}
.box {
	transition: all 0.8s ease;
	transform-style: preserve-3d;
	transform: translate3d(0, 0, -100px);
	position: relative;
}
.box>div {
	padding: 20px;
	font-size: 30px;
	color: #fff;
	opacity: .5;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;	
}
.box>.front {
	background-color: red;
	z-index: 2;
	transform: translate3d(0, 0, 100px);
}
.box>.back {
	background-color: orange;
	transform: rotate3d(0, 1, 0, 180deg) rotate(180deg) translate3d(0, 0, 100px);
}
.box-rotate-gyro>.back {
	width: 200px;
	height: 200px;
	transform: rotate3d(0, 1, 0, 180deg) rotate(90deg) translate3d(0px, 0px, 100px);
}
.box>.top {
	background-color: purple;
	transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px);
}
.box>.bottom {
	background-color: blue;
	transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px);
}
.box>.left {
	background-color: yellow;
	transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 100px);
}
.box>.right {
	background-color: green;
	transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 100px);
}
.box-rotate-top:hover {
	transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, -90deg);
}
.box-rotate-bottom:hover {
  	transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, 90deg);
}
.box-rotate-left:hover {
  	transform: translate3d(0, 0, -100px) rotate3d(0, 1, 0, 90deg);
}
.box-rotate-right:hover {
  	transform: translate3d(0, 0, -100px) rotate3d(0, 1, 0, -90deg);
}
.box-rotate-back:hover {
  	transform: translate3d(0, 0, -100px) rotate3d(1, 0, 0, -180deg);
}
.box-rotate-gyro:hover {
	transform: translate3d(0, 0, -100px) rotate3d(1, 1, 0, -180deg);
}

